<template>
  <div class="container">
    <!-- 遮罩层 -->
    <van-overlay :show="show" @click="(show = false), (categoryMast = false)" />
    <div class="headerContainer">
      <!-- 顶部搜索 -->
      <div class="searchWrapper" @click="toSearchIndex">
        <van-search
          v-model="searchTitle"
          placeholder="请输入商品名称"
          @search="onSearch"
        />
      </div>
      <!-- 导航区域 -->
      <div class="navWrapper">
        <!-- 导航区 -->
        <div class="navWrap">
          <div class="detailNav">
            <div class ="navItem" :class="{ navLigh: categorySelected === 1 }" @click="changeAllActive" >
              综合
            </div>
            <div class="navItem">
              <div class="navPrice">
                <span :class="{ navLigh: categorySelected === 2 }" @click="changePriceActive" >价格</span>
                <i class="iconTop iconfont icon-xiangshangjiantou"></i>
                <i class="iconBottom iconfont icon-xiajiantou"></i>
              </div>
            </div>
            <div class="navItem" :class="{ navLigh: categorySelected === 3 }" @click="showPositionWrap" >
              分类
            </div>
          </div>
          <!-- 是否显示下拉框 -->
          <div v-show="show">
            <!-- 点击分类显示 -->
            <div class="positionWrap" :style="categorySelected === 3 ? 'display:block' : 'display:none'" >
              <ul class="catetoryDetail">
                <li
                  class="categoryItem"
                  :class="{ categoryLigh: item.id === categoryId }"
                  v-for="item in categoryL1List"
                  :key="item.id"
                  @click="handleCategoryList(item.id)"
                >
                  {{ item.name }}
                </li>
              </ul>
            </div>

            <!-- 点击价格显示 -->
            <div class="priceContainer" :style="categorySelected === 2 ? 'display:block' : 'display:none'" >
              <div class="form">
                <div class="formGroup">
                  <label for="filter" class="label">筛选</label>
                  <input type="number" id="filter" placeholder="最低价" v-model="floor" />
                  <div class="line"></div>
                  <input type="number" id="filter" placeholder="最高价" v-model="upper" />
                </div>
                <div class="formGroup">
                  <label for="order" class="label">排序</label>
                  <button class="smallBtn" :class="{activeBtn:orderId===0}" @click="orderId = 0">从低到高</button>
                  <button class="smallBtn" :class="{activeBtn:orderId===1}" @click="orderId = 1">从高到低</button>
                </div>
              </div>
              <div class="btnGroup">
                <button class="btn cancel" @click="show = false">取消</button>
                <button class="btn ok" @click="changeOrder">确定</button>
              </div>
            </div>
          </div>
        </div>
        <!-- 分割线 -->
        <van-divider />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "DeailHeader",
  props:['searchTitle'],
  data() {
    return {
      // searchTitle: "",
      categorySelected: 1, //分类高亮标识
      show: false,
      categoryMast: false, //是否显示分类的列表块
      categoryId: 0, //分类列表标识id
      orderId:3, //排序的标识
      floor: '', //最低价
      upper: ''  // 最高价
    };
  },
  computed: {
    ...mapGetters(["categoryL1List"]),
  },
  methods: {
    // 点击回车后触发
    onSearch(val) {
      // 点击显示关键字搜索页面
      this.$router.push("/search?keyword=" + val);
    },
    // 点击确定时排序
    changeOrder(){
      const {searchTitle,categoryId,orderId,upper,floor} = this
      const upperPrice = upper * 1 ;
      const floorPrice = floor * 1 ;
      if(orderId === 1){
        const descSorted = true;
        const sortType = 1
        this.$store.dispatch("getAllKeywordsInfo", {searchTitle,descSorted,categoryId,sortType,upperPrice,floorPrice});
      }else{
        const descSorted = false;
        const sortType = 1
        this.$store.dispatch("getAllKeywordsInfo", {searchTitle,descSorted,categoryId,sortType,upperPrice,floorPrice});
      }
      this.show = false
    },
    // 点击分类列表，重新获取数据
    handleCategoryList(categoryId){
      this.categoryId = categoryId
      this.$emit('categoryId',categoryId)
      this.show = false
    },
    // 点击搜索框跳转到搜索页面
    toSearchIndex(){
      this.$router.push('/search?keyword=' + this.searchTitle)
    },
    // 点击综合
    changeAllActive() {
      this.show = false
      this.categorySelected = 1; //为 1 时高亮
      const {searchTitle} = this
      this.$store.dispatch("getAllKeywordsInfo", {searchTitle});
    },
    // 点击价格
    changePriceActive() {
      const {categorySelected} = this
      if(this.show){
        categorySelected === 2 ? this.show = false : this.categorySelected = 2
        return
      }
      this.show ? this.show = false : this.show = true;
      this.categorySelected = 2; //为 2 时高亮
    },
    // 点击分类显示遮罩页
    showPositionWrap() {
      const {categorySelected} = this
      if(this.show){
        categorySelected === 3 ? this.show = false : this.categorySelected = 3
        return
      }
      this.show ? this.show = false : this.show = true;
      this.categorySelected = 3; //为 3 时高亮
      this.categoryMast ? (this.categoryMast = false) : (this.categoryMast = true); // 列表的显示与遮罩层同步
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  overflow: hidden;
  .van-overlay {
    z-index: 0;
  }
  .headerContainer {
    z-index: 10;
    .searchWrapper {
      position: fixed;
      width: 375px;
      overflow: hidden;
      .van-search__content {
        background-color: #f4f4f4;
        border-radius: 5px;
      }
    }
    .navWrapper {
      position: fixed;
      width: 100%;
      top: 50px;
      background-color: #fff;
      .van-divider {
        border-color: #817d7d;
        margin-top: 5px;
      }
      .navWrap {
        position: relative;
        .detailNav {
          display: flex;
          height: 40px;
          line-height: 40px;
          justify-content: space-around;
          .navItem {
            font-size: 16px;
            &:nth-child(2) {
              .navPrice {
                position: relative;
                .iconTop {
                  font-size: 10px;
                  position: absolute;
                  top: -3px;
                  right: -15px;
                  color: #d9d9d9;
                }
                .iconBottom {
                  font-size: 10px;
                  position: absolute;
                  bottom: -4px;
                  right: -15px;
                  color: #d9d9d9;
                }
              }
            }
            &.categoryLigh {
              color: #dd1a21;
              border-color: #dd1a21;
            }
          }
        }
        .positionWrap {
          display: none;
          position: absolute;
          top: 100%;
          left: 0;
          width: 100%;
          background-color: #fff;
          overflow-y: scroll;
          max-height: 155px;
          padding-top: 20px;
          padding-left: 20px;
          .catetoryDetail {
            margin: 0;
            padding: 0;
            list-style: none;
            position: relative;
            overflow: hidden;
            .categoryItem {
              float: left;
              padding: 4px 6px;
              border: 1px solid #817d7d;
              border-radius: 2px;
              margin-right: 20px;
              margin-bottom: 20px;
              font-size: 16px;
              color: #333;
              &.categoryLigh {
                color: #dd1a21;
                border-color: #dd1a21;
              }
            }
          }
        }
        .priceContainer {
          display: none;
          position: absolute;
          top: 100%;
          left: 0;
          width: 100%;
          background-color: #fff;
          overflow-y: scroll;
          padding-top: 5px;
          .form {
            padding: 20px 20px 10px;
            .formGroup {
              display: flex;
              margin-bottom: 15px;
              height: 40px;
              flex-flow: row nowrap;
              -webkit-box-orient: horizontal;
              -webkit-box-direction: normal;
              -webkit-box-align: center;
              align-items: center;
              .label {
                font-size: 14px;
                color: #333;
                margin-right: 10px;
              }
              input {
                width: 130px;
                height: 30px;
                border: 1px solid #7f7f7f;
                border-radius: 3px;
                text-align: center;
                font-size: 14px;
                line-height: 30px;
                color: #333;
              }
              .line {
                display: inline-block;
                margin: 5px 10px;
                width: 13px;
                height: 1px;
                background: #7f7f7f;
              }
              .smallBtn {
                margin-right: 10px;
                width: 100px;
                height: 30px;
                text-align: center;
                background-color: #fff;
                border: 1px solid #7f7f7f;
                border-radius: 3px;
                font-size: 14px;
                line-height: 30px;
                color: #333;
                &.activeBtn {
                  color: #dd1a21;
                  border-color: #dd1a21;
                }
              }
            }
          }
          .btnGroup {
            .btn {
              width: 50%;
              text-align: center;
              height: 50px;
              font-size: 14px;
              color: #333;
              line-height: 50px;
              border: none;
              border-top: 1px solid #d9d9d9;
              background: #fff;
              &.ok {
                color: #dd1a21;
              }
              &.cancel{
                border-right: 1px solid #d9d9d9;
              }
            }
          }
        }
      }
    }
  }
  .navLigh {
    color: #dd1a21;
    border-color: #dd1a21;
  }
}
</style>